<template>
    <!-- 用户订单信息展示组件 -->
    <el-card class="table-data-card">
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <template #slotStatus="{ row }">
                <div v-if="row.status == 1" style="color: black;">未付款</div>
                <div v-if="row.status == 2" style="color: coral;">已付款未发货</div>
                <div v-if="row.status == 3" style="color: aquamarine;">已发货未确认</div>
                <div v-if="row.status == 4" style="color: blue;">已确认交易完成</div>
                <div v-if="row.status == 5" style="color: brown;">取消订单</div>
            </template>
            <template #slotTotalFee="{ row }">
                {{ row.totalFee / 100 }}
            </template>
            <template #slotOperation="{ row }">
                <el-dropdown placement="bottom-end" trigger="click">
                    <span class="iconfont icon-caozuo"></span>
                    <template #dropdown>
                        <el-dropdown-item @click="showDetail(row)">查看详情</el-dropdown-item>
                        <el-dropdown-item @click="applyPayOrder(row)" v-if="row.status == 1">生成支付订单</el-dropdown-item>
                        <el-dropdown-item @click="cancelOrder(row)" v-if="row.status == 1">取消订单</el-dropdown-item>
                        <el-dropdown-item @click="confirmOrder(row)" v-if="row.status == 3">确认收货</el-dropdown-item>
                    </template>
                </el-dropdown>
            </template>
        </Table>
    </el-card>
    <OrderDetailDialog ref="orderDetailDialogRef" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import OrderDetailDialog from "@/components/OrderDetailDialog.vue";
const orderDetailDialogRef = ref(null);

const showDetail = async (row) => {
    // 获取订单详情
    let result = await proxy.Request({
        url: proxy.Api.queryOrderDetail + row.id,
    })
    if (!result) {
        return;
    }
    orderDetailDialogRef.value.show(result.data)
}

const applyPayOrder = async (row) => {
    let result = await proxy.Request({
        method: "post",
        url: proxy.Api.createPayOrder,
        params: {
            orderId: row.id
        }
    })
    // 成功与否都跳转到支付订单列表
    router.push("/user/payOrderList")
    if (!result) {
        return;
    }
    proxy.Message.success("生成支付订单成功，请尽快支付")
}

const cancelOrder = async (row) => {
    proxy.Confirm({
        message: "确定取消订单吗？",
        okFun: async () => {
            let result = await proxy.Request({
                method: "put",
                url: proxy.Api.cancelOrder + row.id,
            })
            if (!result) {
                return;
            }
            proxy.Message.success("取消订单成功")
            loadDataList()
        }
    })
}

const confirmOrder = async (row) => {
    proxy.Confirm({
        message: "确定确认订单吗？",
        okFun: async () => {
            let result = await proxy.Request({
                method: "put",
                url: proxy.Api.confirmOrder + row.id,
            })
            if (!result) {
                return;
            }
            proxy.Message.success("确认收货成功")
            loadDataList()
        }
    })
}

const tableData = ref({
    pageNo: 1,
    pageSize: 15,
})
const tableOptions = {}
const searchForm = ref({})

const loadDataList = async () => {
    let result = await proxy.Request({
        url: proxy.Api.queryMyOrders,
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result)
    tableData.value.totalCount = result.data.length
}

const columns = [
    {
        label: 'id',
        prop: 'id',
        width: 180
    },
    {
        label: '总价(元)',
        prop: 'totalFee',
        scopedSlots: 'slotTotalFee'
    },
    {
        label: '状态',
        prop: 'status',
        scopedSlots: 'slotStatus',
        width: 130
    },
    {
        label: '创建时间',
        prop: 'createTime',
    },
    {
        label: '支付时间',
        prop: 'payTime',
    },
    {
        label: '发货时间',
        prop: 'consignTime',
    },
    {
        label: '完成时间',
        prop: 'finishedTime',
    },
    {
        label: '更新时间',
        prop: 'updateTime',
    },
    {
        label: '操作',
        prop: 'operation',
        width: 100,
        scopedSlots: 'slotOperation'
    },
]

</script>

<style lang="scss" scoped>
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
